import { Component, OnInit, ViewChild, ViewEncapsulation, NgZone } from '@angular/core';
import { I18nService } from '../../core/i18n/i18n.service';
import { DialogConfig, DialogComponent, DialogService } from 'ngx-weui';
import { ApiService } from 'src/app/core/api';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
	templateUrl: './index.component.html',
	styleUrls: ['./index.component.less'],
	encapsulation: ViewEncapsulation.None,
})
export class GuideComponent implements OnInit {
	@ViewChild('swiper', { static: true }) swiper;
	@ViewChild('swiper2', { static: true }) swiper2;
	@ViewChild('auto', { static: true }) autoAS: DialogComponent;
	showLogin = false;
	isConcern: boolean = false;
	backUrl: string = '/';
	msgData: any;
	show: boolean = false;
	selPic: string;
  pics: any = [];
  tx;
	guide: any;
	del: any;
	res: any = {};
	id: string;
	showPic = false;
	token: string = null;
	options: any = {
    effect: 'coverflow',
		grabCursor: false,
    centeredSlides: true,
    spaceBetween : 20,
    coverflowEffect: {
      slideShadows : false,
		  rotate: 0,
		  stretch: 0,
		  depth: 100,
		},
		// slidesPerView: 1,
		slidesPerView: 'auto',
		on:{
			click: res => {
				console.log(res,this);
				this.zone.run(()=>{
					this.showPic = true;
					this.swiper2.swiper.slideTo(Number(res.target.title)+1, 0 );
				})
			}
		}
	};
	options2: any = {
		effect: 'slide',
		spaceBetween : 10,
		slidesPerView: 1,
		init:false,
		pagination:{
			el: '.swiper-pagination',
		},
	}
	private DEFCONFIG: DialogConfig = {
		backdrop: true,
	} as DialogConfig;
	config: DialogConfig = {
		title: '价格说明',
		content: '弹窗内容，告知当前状态、信息和解决方法，服务费用支付后不可退款！',
		// cancel: '',
		confirm: '已知晓',
	};

	constructor(private zone:NgZone,private i: I18nService, private api: ApiService, private route: ActivatedRoute, private srv: DialogService, private router: Router) {}
	ngOnInit() {
		if (localStorage.getItem('user')) {
			this.token = JSON.parse(localStorage.getItem('user'));
		}
		this.i.get(['MSG.YGZ', 'MSG.YQXGZ', 'AGENCY-Page.price-indication', 'AGENCY-Page.Service-Items', 'AGENCY-Page.price-text', 'cancel', 'AGENCY-Page.confirm', 'AGENCY-Page.serviceStatus-Y', 'AGENCY-Page.serviceStatus-N', 'MSG.YGZ', 'MSG.YQXGZ', 'AGENCY-Page.serviceTime-N']).subscribe(res => {
			this.msgData = res;
			this.config = {
				title: res['AGENCY-Page.price-indication'],
				content: res['AGENCY-Page.price-text'],
				cancel: undefined,
				confirm: res['AGENCY-Page.confirm'],
			};
		});
		this.id = this.route.snapshot.queryParams['travelGuideId'];
		this.del = this.route.snapshot.data.detail.del;
		this.guide = this.route.snapshot.data.detail.guide;
		this.pics = this.route.snapshot.data.detail.pics;
		this.tx = this.pics[0];
    this.pics.shift();
    
		setTimeout(() => {
			this.swiper.swiper.init();
			this.swiper2.swiper.init();
		});
	}
	loginSuccess(){
		if (localStorage.getItem('user')) {
			this.token = JSON.parse(localStorage.getItem('user'));
		}
	}
	back() {
		// let url = '/';
		// let data = {};
		// if (this.route.snapshot.queryParams['type'] == 1) {
		// 	url = '/agency';
		// 	data = this.route.snapshot.queryParams;
		// }
		// if (this.route.snapshot.queryParams['type'] == 3) {
		// 	url = '/gz';
		// }
		// this.router.navigate([url], {
		// 	queryParams: data,
		// });
		history.back();
	}
	onChangeConcern() {
		if (this.del.isFollowed == 'Y') {
			this.del.isFollowed = 'N';
		} else {
			this.del.isFollowed = 'Y';
		}
		this.api.post('用户关注导游接口', { guideId: this.del.travelGuideForUserView.id, isFollowed: this.del.isFollowed }).then((e: any) => {
			this.del.isFollowed == 'Y' ? this.api.msgSuccess(this.msgData['MSG.YGZ']) : this.api.msgSuccess(this.msgData['MSG.YQXGZ']);
		});
	}

	onShowOfHtml() {
		this.srv.show(this.config).subscribe((res: any) => {
			console.log(res);
		});
		return false;
	}
	toCreateOrder() {
		let qp;
		this.api.post('点击预约计数');
		if(this.route.snapshot.queryParams['type'] == 0 ){
			qp =  {
				travelProductId:this.route.snapshot.queryParams['travelGuideId'] ,
				travelGuideId: this.del.travelGuideForUserView.id,
				reservationFee: this.del.travelGuideForUserView.reservationFee,
				isLXS: false,
				type: '1',
			}
		}else{
				qp =  {
					travelProductId:this.route.snapshot.queryParams['travelProductId'] ,
					travelGuideId: this.id,
					reservationFee: this.del.travelGuideForUserView.reservationFee,
					isLXS: false,
					type: this.route.snapshot.queryParams['type'],
				}
		}
		this.router.navigate(['/order'], {
			queryParams: qp,
		});
	}
	openLogin() {
		this.showLogin = true;
	}
	closeThis(e){
		this.showPic=false;
		e.preventDefault();
	}
	prevent(e){
		e.preventDefault();
	}
}
